<template>
<h1>El-表单组件</h1>
<el-form style="width: 500px;margin: 0 auto;" label-width="80">
  <el-form-item label="用户名">
    <el-input placeholder="请输入用户名" v-model="user.name"/>
  </el-form-item>
  <el-form-item label="密码">
    <el-input placeholder="请输入密码" v-model="user.password" show-password/>
  </el-form-item>
  <el-form-item label="性别">
   <el-radio-group v-model="user.gender">
     <el-radio-button value="1" label="男"/>
     <el-radio-button value="0" label="女"/>
   </el-radio-group>
  </el-form-item>
  <el-form-item label="所在地">
    <el-select v-model="user.city" placeholder="请输入城市">
      <el-option v-for="item in arr" :value="item.ads" :label="item.address"/>
    </el-select>
  </el-form-item>
  <el-form-item label="管理员">
    <el-switch v-model="user.isAdmin"></el-switch>
  </el-form-item>
  <el-form-item>
  <el-button type="success" @click="sub">点我提交</el-button>
  </el-form-item>
</el-form>

</template>
<script setup>
import {ref} from "vue";
const arr =ref([
    {address:'北京',ads:'bj'},
  {address:'上海',ads:'sh'},
  {address:'长沙',ads:'cs'},
  {address:'深圳',ads:'sz'}
])

const user = ref({name:'',password:'',gender:'',city:'',isAdmin:true})
const sub = () => {
  console.log(user.value)
  user.value = {name:'',password:'',gender:'',city:'',isAdmin:true}
}

</script>

<style scoped>

</style>